<template>
  <div>
    <header-top title="创业大厦">
      <span class="header_search" slot="left">
        <i class="el-icon-search icon-sousuo"></i>
      </span>
    </header-top>
    <el-carousel height="150px" style="top:50px;">
      <el-carousel-item v-for="(item,index) in dataimg" :key="index">
        <img :src="item.src" />
      </el-carousel-item>
    </el-carousel>

    <div style="overflow:auto">
      <div v-for="(item,index) in shopItems" :key="index">
        <item
          :name="item.name"
          :number="item.number"
          :money="item.money"
          :time="item.time"
          :isDeliver="item.isDeliver"
          :distance="item.distance"
          :src="item.src"
          @click.native="gotolink"
        ></item>
      </div>
    </div>
    <tabbar></tabbar>
  </div>
</template>

<script>
import HeaderTop from '../components/HeaderTop'
import Item from '../components/Item'
import Tabbar from './Tabbar'
export default {
  name: 'Home',
  data() {
    return {
      i: 0,
      input: '',
      value: '',
      dataimg: [
        {
          src: require('../assets/img/奥尔良烤鸡披萨.webp.jpg')
        },
        {
          src: require('../assets/img/百香果柠檬茶.webp.jpg')
        },
        {
          src: require('../assets/img/蜂蜜柚子茶.webp (1).jpg')
        },
        {
          src: require('../assets/img/超级至尊披萨.webp.jpg')
        }
      ],
      shopItems: [
        {
          name: '米眷粥铺',
          number: 2768,
          money: 0,
          time: 40,
          distance: 12,
          isDeliver: true,
          src: require('../assets/shop/1.png')
        },
        {
          name: '关谷寿司',
          number: 1340,
          money: 39,
          time: 50,
          distance: 1.2,
          isDeliver: false,
          src: require('../assets/shop/2.png')
        },
        {
          name: '洪濑鸡爪',
          number: 2300,
          money: 40,
          time: 10,
          distance: 12.3,
          isDeliver: true,
          src: require('../assets/shop/3.png')
        },
        {
          name: '鱼之坊',
          number: 2420,
          money: 10,
          time: 100,
          distance: 24.3,
          isDeliver: true,
          src: require('../assets/shop/4.png')
        },
        {
          name: '纯属虾想',
          number: 2420,
          money: 10,
          time: 100,
          distance: 24.3,
          isDeliver: true,
          src: require('../assets/shop/5.png')
        }
      ],
      shopItems2: [
        {
          name: '鸡排风云',
          number: 2420,
          money: 10,
          time: 100,
          distance: 24.3,
          isDeliver: true,
          src: require('../assets/shop/6.png')
        },
        {
          name: '鱼念',
          number: 2420,
          money: 10,
          time: 100,
          distance: 24.3,
          isDeliver: false,
          src: require('../assets/shop/7.png')
        },
        {
          name: '海底捞',
          number: 2420,
          money: 10,
          time: 100,
          distance: 24.3,
          isDeliver: false,
          src: require('../assets/shop/8.png')
        },
        {
          name: '蒸鸡先生',
          number: 2420,
          money: 10,
          time: 100,
          distance: 24.3,
          isDeliver: true,
          src: require('../assets/shop/9.png')
        },
        {
          name: '芋时代',
          number: 2420,
          money: 10,
          time: 100,
          distance: 24.3,
          isDeliver: false,
          src: require('../assets/shop/10.png')
        },
        {
          name: '手抓饼',
          number: 2420,
          money: 10,
          time: 100,
          distance: 24.3,
          isDeliver: false,
          src: require('../assets/shop/11.png')
        },
        {
          name: '老北京杂酱面',
          number: 2420,
          money: 10,
          time: 100,
          distance: 24.3,
          isDeliver: true,
          src: require('../assets/shop/12.png')
        },
        {
          name: '挑豆',
          number: 2420,
          money: 10,
          time: 100,
          distance: 24.3,
          isDeliver: false,
          src: require('../assets/shop/13.png')
        },
        {
          name: '脆可爱',
          number: 2420,
          money: 10,
          time: 100,
          distance: 24.3,
          isDeliver: true,
          src: require('../assets/shop/14.png')
        }
      ]
    }
  },

  methods: {
    onScroll() {
      //可滚动容器的高度
      let innerHeight = document.querySelector('#app').clientHeight
      //屏幕尺寸高度
      let outerHeight = document.documentElement.clientHeight
      //可滚动容器超出当前窗口显示范围的高度
      let scrollTop = document.documentElement.scrollTop
      //scrollTop在页面为滚动时为0，开始滚动后，慢慢增加，滚动到页面底部时，出现innerHeight < (outerHeight + scrollTop)的情况，严格来讲，是接近底部。
      // console.log(innerHeight + ' ' + outerHeight + ' ' + scrollTop)
      if (innerHeight < outerHeight + scrollTop) {
        //加载更多操作
        console.log('loadmore')
        if (this.i < 7) {
          setTimeout(() => {
            this.shopItems.push(this.shopItems2[this.i++])
          }, 1000)
        }
      }
    },
    gotolink() {
      //点击跳转至上次浏览页面
      // this.$router.go(-1)

      //指定跳转地址
      this.$router.replace('/food')
    }
  },
  created() {
    window.addEventListener('scroll', this.onScroll)
  },
  components: {
    HeaderTop,
    Item,
    Tabbar
  }
}
</script>

<style>
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>